<template>
	<view>
		<Search @click="search"></Search>
		<view class="scroll-wrap">
			<scroll-view scroll-y="true" style="height: 100vh;width: 200rpx;">
				<view @click="clickItem(index)" :class="{classItem:true,active:actived===index}"
					v-for="(item,index) in ClassList" :key="item.cat_id">{{item.cat_name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" style="height: 100vh; overflow-y: auto;" :scroll-top='scrollTop'>
				<view v-for="obj in children" :key="obj.cat_id">
					<view class="title">
						/ {{obj.cat_name}} /
					</view>
					<view class="body-warp">
						<view class="body" v-for="itm in obj.children" @click="enterDetail(itm)">
							<image class="img" :src="itm.cat_icon" mode="widthFix"></image>
							<text class="text">{{itm.cat_name}}</text>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				actived: 0,
				ClassList: [],
				children: [],
				scrollTop: 0
			};
		},
		async created() {
			await this.getClssList()
			this.children = this.ClassList[0].children

		},
		methods: {
			clickItem(i) {
				this.actived = i
				this.children = this.ClassList[i].children
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},

			async getClssList() {
				const { data: { message } } = await uni.$http.get('/api/public/v1/categories')
				this.ClassList = message
			},
			enterDetail(itm) {
				uni.navigateTo({
					url: `/subpkg/goods_list/goods_list?cid=${itm.cat_id}`
				})
			},
			search() {
				uni.navigateTo({
					url: '/subpkg/SearchShopping/SearchShopping'
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.scroll-wrap {
		display: flex;

		.classItem {
			position: relative;
			width: 200rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			background-color: #f7f7f7;

			&.active {
				background-color: #fff;

				&::after {
					content: "";
					position: absolute;
					top: 40rpx;
					left: 3rpx;
					width: 8rpx;
					height: 40rpx;
					background-color: #c01004
				}
			}

		}

		.title {
			margin: 50rpx 0;
			text-align: center;
			font-weight: 700;
		}

		.body-warp {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.body {
				box-sizing: border-box;
				width: 33.3%;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;

				.img {
					width: 100%;
				}

				.text {
					text-align: center;
				}
			}
		}

	}
</style>
